<script setup lang="ts">
  import { computed } from 'vue';

  const props = defineProps({
    type: {
      type: String ,
      default: () => 'info',
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
    danger: {
      type: Boolean,
      default: () => false
    }
  })

  const emit = defineEmits<{ (event: 'click'): void }>()

  const buttonTypeClass = computed(() => {
    let btnClass = 'default-button';
    switch (props.type) {
      case 'primary': {
        btnClass = 'primary-button';
        break;
      }
      case 'info': {
        btnClass = 'info-button';
        break;
      }
      default: break;
    }
    return btnClass;
  });

  const handleClick = () => {
    if (props.disabled) return;
    emit('click');
  };
</script>

<template>
  <span v-if="type === 'text'" class="kt-button text-button" :danger="danger" :disabled="disabled">
    <slot />
  </span>
  <button
    v-else
    class="kt-button basic-button hover:opacity-70"
    :class="buttonTypeClass"
    :disabled="disabled"
    :danger="danger"
    @click="handleClick"
  >
    <span>
      <slot />
    </span>
  </button>
</template>

<style>
.kt-button {
  @apply inline-block whitespace-nowrap text-center select-none px-4 py-1.5
}
.basic-button {
  @apply rounded-md;
}

.primary-button {
  @apply bg-main-1 border border-solid border-main-1 text-white shadow-btn;
}

.info-button {
  @apply bg-white text-main-1 border border-solid border-main-1;
}

.text-button {
  @apply cursor-pointer;
}

.primary-button[danger] {
  background: var(--warnColor1);
  border-color: var(--warnColor1);
}

.info-button[danger] {
  border-color: var(--warnColor1);
  color: var(--warnColor1);
}
.text-button[danger] {
  color: var(--warnColor1);
}

.basic-button[disabled] {
  color: #c9c9c9 !important;
  background: #f5f5f5 !important;
  border-color: #D9D9D9 !important;
  opacity: 1 !important;
  box-shadow: none;
  text-shadow: none;
  cursor: not-allowed;
}
.text-button[disabled] {
  color: #c9c9c9 !important;
  box-shadow: none;
  text-shadow: none;
  cursor: not-allowed;
}
</style>
